<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
    <head th:replace="_fragments :: head(~{::title})">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>QingFeng's Blog</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.1/dist/semantic.min.css">
        <link rel="stylesheet" href="../static/css/me.css">
    </head>
    <body>
        <!--导航-->
        <nav th:replace="_fragments :: menu(5)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >

            <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
                <i class="sidebar icon"></i>
            </a>
        </nav>

        <!--中间内容-->
        <div  class="m-container m-padded-tb-big">
            <div class="ui container">

                <div class="ui stackable grid">
                    <div class="eleven wide column">
                        <div class="ui segment">
                             <img src="images/wechat.jpg" alt="" class="ui rounded image">
                        </div>
                    </div>
                    <div class="five wide column">
                        <div class="ui top attached segment">
                            <div class="ui header" th:text="#{about.title}">关于我</div>
                        </div>
                        <div class="ui attached segment">
                            <p class="m-text" th:text="#{about.name}">独立开发者。</p>
                            <p class="m-text" th:text="#{about.detail}">热爱编程，喜欢折腾...</p>
                        </div>
                        <div class="ui attached segment">
                            <div class="ui orange basic left pointing label">software development</div>
                            <div class="ui orange basic left pointing label">Coding</div>
                        </div>
                        <div class="ui attached segment">
                            <div class="ui teal basic left pointing label m-margin-tb-tiny">Java</div>
                            <div class="ui teal basic left pointing label m-margin-tb-tiny">Spring Boot</div>
                            <div class="ui teal basic left pointing label m-margin-tb-tiny">Spring Cloud</div>
                            <div class="ui teal basic left pointing label m-margin-tb-tiny">Kubernetes</div>
                            <div class="ui teal basic left pointing label m-margin-tb-tiny">DevOps</div>
                            <div class="ui teal basic left pointing label m-margin-tb-tiny">Docker</div>
                            <div class="ui teal basic left pointing label m-margin-tb-tiny">...</div>
                        </div>
                        <div class="ui bottom attached segment">
                            <a href="https://github.com/alexwang66" class="ui circular icon button"><i class="github icon"></i></a>
                        </div>

                        <div class="ui wechat-qr flowing popup transition hidden">
                            <img src="../static/images/wechat.jpg" alt="" class="ui rounded image" style="width: 110px">
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <br>
        <br>
        <!--底部footer-->
        <footer th:replace="_fragments :: footer" class="ui inverted vertical segment m-padded-tb-massive">
        </footer>


        <!--/*/<th:block th:replace="_fragments :: script">/*/-->
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
        <!--/*/</th:block>/*/-->

        <script>

            $('.menu.toggle').click(function () {
                $('.m-item').toggleClass('m-mobile-hide');
            });

        </script>
    </body>
</html>